<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';
import { ApiRole, ApiUser } from '../../api';
import { ElMessageBox, FormInstance, FormRules } from 'element-plus';



const model=ref<API.User.ConfigRole>({
     user_name:'',
    role_id:0
})
const roles=ref<UI.Role[]>()
onMounted(async()=>{
    roles.value=await ApiRole.get()
})
const show=ref<boolean>(false)
const cancel=async()=>{
   await ElMessageBox.confirm('确定取消吗？取消数据会丢失哦', '提示', {type:'warning'})
show.value=false    
}
const emits=defineEmits<{(name:'save',model:API.User.ConfigRole):void}>()
const save=async()=>{
    await formRef.value?.validate()
    await ApiUser.configRole(model.value)
    emits('save',model.value)
    show.value=false
}
const formRef=ref<FormInstance|null>(null)
const roules:FormRules={
    user_name:[{required:true,message:'请输入用户名称',trigger:'blur'}],
    role_id:[{required:true,message:'请选择角色',trigger:'blur'}]
}
defineExpose({
   begin:(data:API.User.ConfigRole)=>{
    formRef.value?.resetFields()
model.value.role_id=data.role_id ?? 0
model.value.user_name=data.user_name
    nextTick(()=> show.value=true)
   }
})
</script>

<template>
  <el-dialog title="角色分配"  width="500px"  v-model="show">
    <el-form ref="form" :model="model" label-width="80px" :rules="roules">
        <el-form-item label="用户名称" prop="user_name" >
            <el-input v-model="model.user_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色分配">
            <el-select v-model="model.role_id" placeholder="">
                <el-option label='未分配' :value="0"></el-option>
                <el-option v-for="item in roles" :key="item.role_id" :label="item.role_name" :value="item.role_id">
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
      <div slot="footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
      </div>
  </el-dialog>
</template>



<style scoped lang="scss">

</style>